<template>
  <div class="content">
    <div class="search">
      <a-input
        v-model="state.searchKey"
        :style="{ width: '320px' }"
        placeholder="输入姓名或工号搜索"
        allow-clear
        @clear="clearHandle"
      />
      <a-button
        type="primary"
        :loading="state.searchLoading"
        @click="searchHandle"
        >搜索</a-button
      >
    </div>
    <div class="table">
      <gridTable
        :columns="state.columns"
        :data="state.data"
        :action-func="actionhandle"
        :loading="state.searchLoading"
        :pagination="state.pagination"
        :page-change="pageChange"
      >
      </gridTable>
    </div>
  </div>
</template>
  
  <script setup lang="tsx">
  import {
    Message,
      type TableColumnData,
      type TableData,
      type TableRowSelection,
    } from '@arco-design/web-vue';
import gridTable from "@/components/table/gridTable.vue";
import { reactive } from "vue";
import { commonApi } from "@/api/index";

const renderImg = ({column,record})=>{
//    console.log(column.dataIndex);
//    console.log(record[column.dataIndex]);
   return (
   <div>
         <a-image
         width='100'
         src={record[column.dataIndex]}
    ></a-image>
    </div>
    
   );
}
const renderGender =({column,record})=>{
    let num = record[column.dataIndex];
    switch(num){
        case '0':
            return '女'
        case '1':
            return '男'
    }
}

const state = reactive({
  columns: [
    {
      title: "工号",
      dataIndex: "jobnumber",
    },
    {
      title: "姓名",
      dataIndex: "userName",
    },
    {
      title: "性别",
      dataIndex: "gender",
      render:renderGender,
    },
    {
      title: "头像",
      dataIndex: "avatar",
      render:renderImg,
    },
    {
      title: "电话号码",
      dataIndex: "phone",
    },
    {
      title: "操作",
      slotName: "optional",
      width:150,
      action:[
        // {
        //     text:'详情',
        //     value:'detail',
        // },
        // {
        //     text:'修改',
        //     value:'revise',
        // },
        {
            text:'删除',
            value:'delete',
        },
      ]
    },
  ],
  data: [] as unknown as TableColumnData[],
  pagination: {
    current: 1,
    pageSize: 7,
    total: 0,
  },
  searchLoading:false,
  searchKey:'',
  role:'doctor',
});
// 分页
const pageChange = (page) => {
  // console.log(page);
  state.pagination.current = page;
};
// 操作
const actionhandle=(key,data)=>{
  console.log(key,data);
  switch(key){
    case 'detail':
      console.log(data);
          Message.info({
            content: "开发中",
            position: "top",
          });
      break;
    case 'revise':
      console.log(data);
          Message.info({
            content: "开发中",
            position: "top",
          });
      break;
    case 'delete':
    deleteData(data.jobnumber);
      break;
  }
  
};
// 删除数据
const deleteData =async (jobnumber)=>{
  //  console.log(jobnumber);
  await commonApi.deleteData({jobnumber}).then((res)=>{
     console.log(res);
     if (res.code === 200) {
          Message.success({
            content: res.msg || "删除成功",
            position: "top",
          });
        } else {
          console.log(res.msg);
        }
   }).catch((err)=>{
    console.log(err);
    
   })
  getData({role:state.role});
   
};
// 搜索
const searchHandle =async ()=>{
  if(state.searchKey){
    state.searchLoading = true;
    await getData({searchKey:state.searchKey,role:state.role});
  }

};
const clearHandle =async ()=>{
  await getData({role:state.role});
}
// 获取数据
const getData =async (data)=>{
   await commonApi.getRoleInfo(data).then((res)=>{
        console.log(res);
        state.data = res.data?.result;
        state.pagination.total = res.data?.result.length;
    }).catch((err)=>{
        console.log(err);
        
    })
   state.searchLoading = false;
};
getData({role:state.role});
</script>
  <style lang="less" scoped>
.content {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  //   display: flex;
  //   align-items: center;
  //   justify-content: center;
}
.search {
  width: 100%;
  padding: 20px 0;
}
.table {
  width: 100%;
  height: 100%;
}
</style>